<template>
  <div class="ui-section">
    <div class="header">
      <div class="left" @click.stop="fold=!fold">
        <div class="fold" :class="fold?'arrow-right':'arrow-down'"></div>
        <div class="title">{{ name }}</div>
      </div>
      <slot name="header"></slot>
    </div>
    <div style="margin-left: 10px;">
      <slot v-if="!fold"></slot>
    </div>
  </div>
</template>

<script lang="ts">
import { defineComponent, ref } from 'vue';

export default defineComponent({
  name: 's-section',
  emits: [],
  props: {
    name: {
      type: String,
    },
  },
  setup(props, { emit }) {
    const fold = ref(false);

    return { fold };
  },
});
</script>
<style scoped lang="scss">
.ui-section {
  .header {
    height: 26px;
    width: 100%;
    display: flex;
    flex-direction: row;
    align-items: center;
    justify-content: left;
    border-bottom: 1px solid #666666;
    color: #bdbdbd;

    .left {
      cursor: pointer;
      display: flex;
      flex-direction: row;
      justify-content: center;
      align-items: center;
    }

    .title {
      color: #999999;
      user-select: none;
      font-size: 12px;
      font-weight: bold;
    }

    .fold {
      margin: 0 3px;
    }

    .arrow-right {
      border: 4px solid transparent;
      border-left: 8px solid #bdbdbd;
      border-right: 0;
    }

    .arrow-down {
      border: 4px solid transparent;
      border-top: 7px solid #bdbdbd;
      border-bottom: 0;
    }
  }
}
</style>
